<template>
  <div class='loginbg'>
    <div class='contentBox'>
      <span class="logo"></span>
      <div class="formBox">
        <p class="title">管理员登录</p>
        <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm">
          <el-form-item prop="account">
            <el-input type="text" v-model="ruleForm2.account" clearable auto-complete="on" placeholder="账号" @keyup.enter.native="handleSubmit2"></el-input>
          </el-form-item>
          <el-form-item prop="checkPass">
            <el-input type="password" show-password v-model="ruleForm2.checkPass" auto-complete="on" placeholder="密码" @keyup.enter.native="handleSubmit2"></el-input>
          </el-form-item>
          <el-checkbox v-model="checked" class="remember">记住密码</el-checkbox>
          <el-form-item style="width:100%;">
            <el-button type="primary" style="width:100%;box-shadow: 0 2px 12px 0 #66B1FF;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import { requestLogin } from '../api/api';
  export default {
    data() {
      return {
        logining: false,
        ruleForm2: {
          account: '',
          checkPass: ''
        },
        rules2: {
          account: [
            { required: true, message: '请输入账号', trigger: 'blur' },
          ],
          checkPass: [
            { required: true, message: '请输入密码', trigger: 'blur' },
          ]
        },
        checked: false
      };
    },
    mounted() {
      this.ruleForm2.account =  sessionStorage.getItem('account');
      this.ruleForm2.checkPass =  sessionStorage.getItem('password');
      if(sessionStorage.getItem('status') == 'true'){
        this.checked = true
      }else{
        this.checked = false
      };
    },
    methods: {
      handleReset2() {
        this.$refs.ruleForm2.resetFields();
      },
      handleSubmit2(ev) {
        var _this = this;
        this.$refs.ruleForm2.validate((valid) => {
          if (valid) {
            this.logining = true;
            var loginParams = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass };
            requestLogin(loginParams).then(data => {
              this.logining = false;
              //记住密码
              if(this.checked){ 
                sessionStorage.setItem('account',this.ruleForm2.account);
                sessionStorage.setItem('password',this.ruleForm2.checkPass);
                sessionStorage.setItem('status','true');
              }else{
                sessionStorage.setItem('account','');
                sessionStorage.setItem('password','');
                sessionStorage.setItem('status','false');
              }
              if(data.access_token){
                sessionStorage.setItem('user',JSON.stringify(data));
                sessionStorage.setItem('sysUserName',this.ruleForm2.account);
                this.$router.push({ path: '/table' });
              }else{
                return false
              }
            }).catch(function(err){
               _this.$message.error('账号异常');
               _this.logining = false;
            });
          } else {
            return false;
          }
        });
      }
    }
  }

</script>

<style lang="scss" scoped>
  .loginbg{
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    background-image: url("../assets/bg.png");
    background-repeat: no-repeat;
    background-size: cover;
      .contentBox{
        width: 45%;
        height: 480px;
        margin: 10% auto;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .5);
        border-radius: 15px;
        position: relative;
        .logo{
          position: absolute;
          height: 100px;
          width: 100px;
          background-image: url("../assets/bbn.png");
          background-repeat: no-repeat;
          background-size: cover;
        }
        .formBox{
          background: #FFF;
          height: 400px;
          width: 270px;
          padding: 40px;
          border-radius: 0 15px 15px 0;
          float: right;
            .title{
              font-size: 26px;
              color: #1F4881;
            }
            .remember {
              margin: 0px 0px 35px 0px;
            }
        }
       
      }
  }
  .el-form-item{
    margin-bottom: 30px;
  }
</style>